<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基础表格
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="showadd">增加文章</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="轮播名"></el-table-column>
                <el-table-column label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image
                                class="table-td-thumb"
                                :src="$host+scope.row.pjname"
                                :preview-src-list="[$host+scope.row.pjname]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="sta" label="状态">
                    <template slot-scope="scope">
                         {{parseInt(scope.row.sta)==1?'生效':'无效'}}
                    </template>
                </el-table-column>

                <el-table-column prop="time" label="注册时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                @click="handleEffect(scope.$index, scope.row)"
                        >{{setsta(scope.row.sta)}}</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="tit" :visible.sync="editVisible" width="60%" >
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="名称" required>
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" required>
                    <el-input type="textarea" v-model="form.fcon"></el-input>
                </el-form-item>
                <el-form-item label="上传文件" required>
                    <upload ref="file"></upload>
                </el-form-item>
                <el-form-item required>
                    <mavon-editor   v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { fetchData } from '../../api/index';
    import upload from '../common/upload.vue'
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    export default {
        name: 'banner',
        components:{
            upload,
            mavonEditor
        },
        data() {
            return {
                content:'',
                modal:'add',
                tit:'增加文章',
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 100
                },
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {
                    name:'',
                    fcon:''
                },
                idx: -1,
                id: -1
            };
        },
        created() {
            this.getData();
        },
        methods: {
            setsta(sta){
              if(sta==1){
                  return '失效'
              }  else{
                  return '生效'
              }
            },
            $imgAdd(pos, $file){
                var formdata = new FormData();
                formdata.append('file', $file);
                // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
                this.$axios({
                    url: '/common/upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    this.$refs.md.$img2Url(pos, url);
                })
            },
            change(value, render){
                // render 为 markdown 解析后的结果
                this.html = render;
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                this.$axios.get(this.$base+'/findBanner',{
                    params:{
                        page:this.query.pageIndex,
                        pagesize:this.query.pageSize
                    }
                }).then(({data})=>{
                    console.log(data)
                    this.tableData = data.msg;
                    this.pageTotal = data.total
                })
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$axios.get(this.$base+'/delBanner',{params:{id:row.id}}).then(({data})=>{
                            if(data.status==200){
                                this.$message.success('删除成功');
                                if(this.tableData.length==1){
                                    this.$set(this.query, 'pageIndex', this.query.pageIndex-1);
                                }
                                this.getData();
                            }else{
                                this.$message.error('删除失败');
                            }
                        })
                    })
                    .catch(() => {});
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                let ar = []
                for(let i=0;i<this.multipleSelection.length;i++){
                    ar.push(this.$axios.get(this.$base+'/delBanner',{params:{id:this.multipleSelection[i].id}}))
                }
                if(this.tableData.length-this.multipleSelection.length==0){
                    this.$set(this.query, 'pageIndex', this.query.pageIndex-1);
                }
                Promise.all(ar).then((data)=>{
                    this.$message.success('删除成功');
                    this.getData();
                })
            },
            // 编辑操作
            handleEdit(index, row) {
                this.modal = 'edit'
                this.tit = '编辑文章'
                this.form = row;
                this.content = row.con;

                // this.idx = index;
                // this.form = row;
                this.editVisible = true;
                this.$nextTick(()=>{
                    this.$refs.file.file = ''
                    this.$refs.file.img = this.$host+row.pjname;
                })
            },
            handleEffect(index, row) {
                let sta = 0
                if(row.sta==1){
                    sta = 0
                }else{
                    sta = 1
                }
                this.$axios.get(this.$base+'/effectBanner',{params:{id:row.id,sta:sta}}).then(({data})=>{
                    if(data.status==200){
                        this.$message.success('已设为前台展示')
                        this.getData()
                    }else{
                        this.$message.error('设置失败')
                    }
                })
            },
            // 增加
            showadd(){
                this.modal = 'add'
                this.tit = '增加文章'
                this.form = {};
                this.content = '';

                this.editVisible = true;
                this.$nextTick(()=>{
                    this.$refs.file.file = ''
                    this.$refs.file.img = '';
                })
            },
            add() {
                if(this.modal=='add'){
                    this.addArticle()
                }else{
                    this.editArticle()
                }
            },
            addArticle(){
                for(let item in this.form){
                    if(!this.form[item]){
                        this.$alert('全部为必填项')
                        return
                    }
                }
                if(!this.$refs.file.file){
                    this.$alert('没有上传图片')
                    return
                }
                let f = new FormData();
                f.append('name',this.form.name);
                f.append('con',this.content);
                f.append('fcon',this.form.fcon);
                f.append('file',this.$refs.file.file);
                this.$axios.post(this.$base+'/addBanner',f).then(({data})=>{
                    this.getData();
                    this.editVisible = false
                })
            },
            editArticle(){
                for(let item in this.form){
                    if(!this.form[item]){
                        this.$alert('全部为必填项')
                        return
                    }
                }
                let f = new FormData();
                f.append('name',this.form.name);
                f.append('con',this.content);
                f.append('fcon',this.form.fcon);
                f.append('file',this.$refs.file.file);
                f.append('id',this.form.id);
                f.append('pjname',this.form.pjname)
                this.$axios.post(this.$base+'/editBanner',f).then(({data})=>{
                    this.getData();
                    this.editVisible = false
                })
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
